/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-21 14:23:29
 * @Description: 首页-控制台-我的指令
 */
@import "@/assets/style/global.scss";

@mixin topIcon($item-name: gkyj_yjzsl) {
    &.#{$item-name}-icon {
        background: url('../images/'+ $item-name +'.png') no-repeat center;
        background-size: 100% 100%;
    }
}

.my-instructions {
    width: 80%;
    margin: 0 auto;

    .top-num-list {
        margin-top: 0;
        display: flex;
        justify-content: space-between;

        li {
            display: flex;
            align-items: center;

            .icon {
                width: 32px;
                height: 36px;
                @include topIcon(gkyj_yjzsl);
                @include topIcon(wdzl_yjs);
                @include topIcon(wdzl_wjs);
                @include topIcon(wdzl_yfk);
            }

            .detail {
                font-size: 12px;
                margin-left: 10px;

                .value {
                    color: $yellow;
                    font-size: 16px;
                    margin-bottom: 6px;
                }

                .name {
                    color: $gray;
                    font-size: 14px;
                }
            }
        }
    }
    .lists-data {
        width: 100%;

        li {
            width: 100%;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            $height: 50px;
            height: $height;
            line-height: $height;
            border-bottom: 1px solid #2c3a3f;

            &:first-child {
                border-bottom: none;
            }

            span {
                text-align: center;
                display: block;
                width: 26%;
                &:first-child{
                    width: 10%;
                    text-align: left;
                }
                &:last-child{
                    width: 10%;
                    text-align: right;
                }
            }

            .type{
                position: relative;
                &.type-APP{
                    background: url(../images/wdzl_APP.png) no-repeat 2% 50%;
                    background-size: auto 56%;
                    &:after{
                        content: 'APP';
                        position: absolute;
                        top: 50%;
                        left: 20%;
                        transform: translate(-50%, -50%);
                        margin-left: 20px;
                    }
                }
                &.type-person {
                    background: url(../images/wdzl_person.png) no-repeat 2% 50%;
                    background-size: auto 56%;
                    &:after {
                        content: '个人';
                        position: absolute;
                        top: 50%;
                        left: 20%;
                        transform: translate(-50%, -50%);
                        margin-left: 20px;
                    }
                }
            }
            .status-0{
                color: #30adff;
                cursor: pointer;
                &:after{
                    content: '已反馈'
                }
            }
            .status-1 {
                color: #49bf9b;
                cursor: pointer;
                &:after {
                    content: '已接收'
                }
            }
            .status-2 {
                color: #d9915c;
                cursor: pointer;
                &:after {
                    content: '未接收'
                }
            }
        }
    }
}
.detail-lists {
    width: 100%;
    li{
        $height: 40px;
        line-height: $height;
        height: $height;
        display: flex;
        span{
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &:first-child{
                width: 94px;
            }
        }
    }
}
